<template>
  <div class="user-main-outer">
    <div class="user-main-left-side">
      <div class="user-main-info-outer">
        <div class="user-main-title-font">
          Welcome, {{ 'zqa'.charAt(0).toLocaleUpperCase() }}!
        </div>
        <div>
          <h4>
            Personal Information
          </h4>
          <div class="user-main-router-button-outer">
            <basic-button
                style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"
                :hovered="false" @click="toRoute('/user/info')">
              <div class="user-main-router-button-inside-outer">
                <div class="user-main-router-button-inside-font">
                  Account & Device Info
                </div>
                <div class="user-main-router-button-inside-icon">
                  <ArrowRightOutlined class="user-main-router-button-inside-icon"/>
                </div>
              </div>
            </basic-button>
            <basic-button
                style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"
                :hovered="false" @click="toRoute('/user/address')">
              <div class="user-main-router-button-inside-outer">
                <div class="user-main-router-button-inside-font">
                  Edit Addresses
                </div>
                <div class="user-main-router-button-inside-icon">
                  <ArrowRightOutlined class="user-main-router-button-inside-icon"/>
                </div>
              </div>
            </basic-button>
          </div>
        </div>
        <div>
          <h4>
            Business
          </h4>
          <div class="user-main-router-button-outer">
            <basic-button
                style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"
                :hovered="false" @click="toRoute('/user/shopCart')">
              <div class="user-main-router-button-inside-outer">
                <div class="user-main-router-button-inside-font">
                  Shop Cart
                </div>
                <div class="user-main-router-button-inside-icon">
                  <ArrowRightOutlined class="user-main-router-button-inside-icon"/>
                </div>
              </div>
            </basic-button>
            <basic-button
                style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"
                :hovered="false" @click="toRoute('/user/historicalOrderList')">
              <div class="user-main-router-button-inside-outer">
                <div class="user-main-router-button-inside-font">
                  Historical Order
                </div>
                <div class="user-main-router-button-inside-icon">
                  <ArrowRightOutlined class="user-main-router-button-inside-icon"/>
                </div>
              </div>
            </basic-button>
          </div>
        </div>
      </div>
    </div>
    <div class="user-main-right-side">
      <div class="user-main-info-outer">
        <div class="user-main-title-font">
          Communication
        </div>
        <div v-for="i in 1">
          <h4>
            Updates
          </h4>
          <div style="display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;">
            <div class="user-main-router-button-outer">
              <basic-button
                  style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"
                  :hovered="false" @click="toRoute('/user/mail')">
                <div class="user-main-router-button-inside-outer">
                  <div class="user-main-router-button-inside-font" style="font-weight: bold;line-height: 1.5">
                    Email
                    <div
                        style="font-weight: normal;font-size: 13px;line-height: 1.5;">
                      Choose which emails you want to receive
                    </div>
                  </div>
                  <div class="user-main-router-button-inside-icon">
                    <ArrowRightOutlined class="user-main-router-button-inside-icon"/>
                  </div>
                </div>
              </basic-button>
            </div>
<!--            <div class="user-main-router-button-outer">-->
<!--              <basic-button-->
<!--                  style="box-sizing: border-box;width: 100%;border-radius: 10px;padding:8px 12px 8px 12px;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);"-->
<!--                  :hovered="false" @click="toRoute('/user/phone')">-->
<!--                <div class="user-main-router-button-inside-outer">-->
<!--                  <div class="user-main-router-button-inside-font" style="font-weight: bold;line-height: 1.5">-->
<!--                    Text-->
<!--                    <div style="font-weight: normal;font-size: 13px;line-height: 1.5">-->
<!--                      Change your phone number for order tracking-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="user-main-router-button-inside-icon">-->
<!--                    <ArrowRightOutlined class="user-main-router-button-inside-icon"/>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </basic-button>-->
<!--            </div>-->
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ArrowRightOutlined} from "@ant-design/icons-vue";


export default defineComponent({
  components: {ArrowRightOutlined},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const userInfo = computed(() => {
      return store.state.globalInfo.userInfo
    })

    const toRoute = (path:string) => {
      router.push({
        path
      })
    }

    return {
      userInfo,
      toRoute
    }
  }
})
</script>

<style lang="less">


</style>

<style scoped lang="less">

.user-main-router-button-outer {
  flex: 0 0 49%;
  @media screen and (max-width: 1078px) {
    flex: 0 0 100%;
  }
}
.user-main-router-button-inside-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-main-router-button-inside-font {
  padding: 0 0 0 16px;
  display: inline-block;
  width: calc(100% - 24px - 20px);
  font-size: 16px;
}
.user-main-router-button-outer > div {
  margin-bottom: 16px;
}
.user-main-router-button-inside-icon {
  display: inline-block;
  font-size: 24px;
}
.user-main-outer {
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;

  @media screen and ( max-width: 576px) {
    padding: 8px 10px;
  }
}

.user-main-info-outer {
  border-radius: 16px;
  background-color: #f5f5f5;
  padding: 20px 30px;
  @media screen and ( max-width: 576px) {
    padding: 15px 15px;
  }
}

.user-main-title-font {
  font-size: 1.6rem;
  font-weight: 700;
}



.user-main-left-side {
  flex: 0 0 350px;
  @media screen and (max-width: 776px) {
    flex: 0 0 100%;
  }
}

.user-main-right-side {
  flex: 1 1 calc(100% - 350px);
  padding-left: 30px;
  box-sizing: border-box;
  @media screen and (max-width: 776px) {
    margin-top: 20px;
    flex: 0 0 100%;
    padding-left: 0;
  }
}

</style>
